<template>
  <view class="container">
    <view class="content">
      <view
        v-for="(item, index) in progressList"
        :key="index"
        class="progress-item"
      >
        <view class="icon-container">
          <u-icon
            :name="item.icon"
            color="#4CAF50"
            size="24"
            class="icon-image"
          ></u-icon>
          <text class="progress-title">{{ item.title }}</text>
        </view>
        <view class="progress-content">
          <text class="progress-description">{{ item.description }}</text>
        </view>
        <text class="progress-description">查看详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progressList: [
        {
          icon: "checkmark-circle",
          title: "车辆年审过期",
          description: "暂无车辆技术等级申请提交成功信息。",
        },
        {
          icon: "checkmark-circle",
          title: "车辆年审要到期",
          description: "暂无车辆技术等级受理信息。",
        },
        {
          icon: "checkmark-circle",
          title: "车辆年审正常",
          description: "暂无车辆技术等级合格信息。",
        },
        {
          icon: "checkmark-circle",
          title: "车辆技术等级不合格",
          description: "暂无车辆技术等级不合格信息。",
        },
      ],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f3f4f6;
  min-height: 100vh;
}

.content {
  padding: 20rpx;
}

.progress-item {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;
  margin-bottom: 20rpx;
}

.icon-container {
  display: flex;
  justify-content: flex-start;
  border-bottom: 2rpx solid #f1f1f1;
  .icon-image {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.progress-content {
  margin: 30rpx 0 0 0;
}

.progress-title {
  font-size: 32rpx;
  color: #2877ff;
  text-align: center;
  margin-bottom: 40rpx;

  margin-left: 20rpx;
}

.progress-description {
  font-size: 28rpx;
  color: #666666;
}
</style>
